<template>
  <div>
    <img
      :src="banner"
      alt=""
      class="topb"
    >
    <div class="main minh800">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">{{$t('home')||"首页"}}</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/help_center/h_home' }">{{$t('faqCenter')||"问题中心"}}</el-breadcrumb-item>
        <el-breadcrumb-item>{{$t(breadNavItem.i18nKey)||breadNavItem.label}}</el-breadcrumb-item>
      </el-breadcrumb>
      <el-container>
        <el-aside width="360px">
          <ul class="list">
            <li
              v-for="(item,index) in qList"
              :key='index'
              :class="qid==item.autoid?'active':''"
              @click="getIDinfo(item)"
            >
            <p v-text="item.title" class="w350"></p>
            </li>
          </ul>
        </el-aside>
        <el-main>
          <div class="news_cont">
          <h1 v-text="qItem ?qItem.title:''" class="font-bold font-24"></h1>
          <p class="font-12"><span>发布时间：{{qItem.wdate}}</span> <span class="m-left-10">阅读量：{{qItem.readnum}}</span></p>
          <p v-html="qItem?qItem.reply:''"></p>
          </div>
        </el-main>
      </el-container>
    </div>
  </div>
</template>
<script>
import questionModel from "@/model/questionModel";
let { faqList } = questionModel;
export default {
  data() {
    return {
      banner: require("@/assets/images/help/bangzhu_banner.png"),
      qList: null,
      qItem: null,
      qid: null,
      breadNavItem: {}
    };
  },
  mounted() {
    let params = this.getParams();
    if (params) {
      this.breadNavItem = params;
      this.qid = params.qid;
    }
    this.getQlist();
  },
  methods: {
    getParams() {
      return Object.assign({}, this.$route.query);
    },
    getQlist() {
      if (faqList) {
        this.qList = faqList;
        this.getQItem(this.qList, this.qid);
      } else {
        this.request(this.api.articles,{pagesize:'1',pagecode:'40'}).then(res => {
          console.log(`问题列表:${JSON.stringify(res)}`);
          if (res && res.code != "0") return this.getDataFaild(res.msg);
          if (res.data && res.data[0]) {
            this.qList = questionModel.faqList = res.data;
            this.getQItem(this.qList, this.qid);
          }
        });
      }
    },
    // 获取问题详情
    getQItem(arrList, id) {
      arrList.map(item => {
        if (item.autoid && item.autoid == id) {
          this.qItem = item;
        }
      });
    },
    getIDinfo(item){
      console.log(item.autoid);
      this.qid=item.autoid;
      this.getQItem(this.qList,this.qid);
    }
  }
};
</script>
<style lang="scss" scoped>
.main {
  width: 77%;
  margin: 30px auto 0 auto;
  .el-container {
    margin-top: 27px;
  }
  .el-aside {
    border-right: none;
    padding: 0;
  }
  .list {
    li {
      @include textVcenter;
      padding-left: 10px;
      &:hover{
        background: $color-primary;
        color: #fff;
      }
      &.active {
        background: $color-danger;
        color: #fff;
      }
    }
  }
  .el-main {
    h1 {
      margin-bottom: 25px;
    }
    padding: 0 0 0 40px;
    p {
      line-height: 1.8;
    }
  }
  .warn {
    margin-top: 25px;
    color: $color-danger;
  }
}
.minh800{
    min-height: 850px;
}
.topb{width: 100%;}
.corfff{color: #fff;}
.w350{width: 300px;overflow: hidden;text-overflow: ellipsis;}
</style>


